{extend name="main"}
{block name="style"}
<style type="text/css">
.rounded-0 .el-input__inner{border:0;border-radius: 0;}
.job-fair-nav .el-tabs__header{margin:0;}
.job-fair-nav .el-tabs__nav-scroll{padding: 0 1rem;}
.job-fair-booth .el-tabs__item{height:60px;line-height:60px;padding: 0 2rem;}
.is-lock.bg-danger .text-primary,
.is-lock.bg-danger .text-secondary{
color: #FFFFFF !important;
}
.is-lock.bg-success .text-primary,
.is-lock.bg-success .text-secondary{
color: #FFFFFF !important;
}
.py-10{padding: 10rem 0;}
.el-autocomplete .el-select .el-input {width: 130px; }
.list{margin-bottom: 0;padding-left: 0;}
</style>
{/block}
{block name="body"}
<el-select v-model="search.jid" clearable placeholder="请选择" class="rounded-0 w-50"
@change="initHtml">
	<el-option
	  v-for="item in JobFair"
	  :key="item.id"
	  :label="'ID:'+item.id+'-'+item.title"
	  :value="item.id">
	</el-option>
</el-select>
<div class="bg-white p-3">
	<el-tabs tab-position="left" v-model="booth" class="job-fair-booth mt-3"
	v-if="Find.booth&&Find.booth.length>0">
	    <el-tab-pane :label="v.name" :name="v.identifier" v-for="(v,index) in Find.booth">
  		<div class="row">
	  		<div v-for="(va,n) in v.boothCate" class="col-4 col-xl-3 py-3">
	  			<div class="rounded p-3 pointer"
	  			:class="getBoothClass(va)"
	  			@click="clickBooth(va,index,n)">
			    	<div class="flex mb-1 flex-center">
			    		<div class="flex-1">
			    		<div class="h1 mb-0 text-secondary">{{v.identifier}}{{va.index}}</div>
			    		<div class="small">{{va.stitle?va.stitle:va.title}}</div>
			    		</div>
			    		<div>
					  		<div class="small" v-if="va.status===0">待售</div>
					  		<div class="small text-white" v-if="va.status===1">锁定</div>
					  		<div class="small text-white" v-if="va.status===2">已售</div>
					    	<div>
					    		
						    	<div v-if="va.price>0" class="text-primary font-weight-bold">{{va.price}}元</div>
						    	<div v-else>免费</div>
					    	</div>
			    		</div>
			    	</div>
		    	</div>
	  		</div>
  		</div>
	    </el-tab-pane>
	</el-tabs>
	<div class="py-10 text-center text-secondary" v-else-if="search.jid">
		当前招聘会无展位，<a :href="'/job-fair/edit/'+search.jid+'?activeName=booth'" class="text-primary" target="_blank">点击去添加</a>
	</div>
	<div class="py-10 text-center text-secondary" v-else>
		请先选择要管理的招聘会
	</div>
</div>
<el-drawer
  title="我是标题"
  ref="drawerHandleBooth"
  :visible.sync="drawerHandleBoothFind"
  :with-header="false"
  :wrapper-closable="false"
  :before-close="closeDrawerHandleBooth"
  @keyup.esc.native="drawerHandleBoothFind=false;">
  	<div class="wrap h-100">
		<div class="flex px-3 py-2">
			<div class="flex-1 block-title-before py-2">{{boothFind.identifier}}{{boothFind.index}}</div>
			<div class="py-2">
		  		<div class="small" v-if="boothFind.status===0">待售</div>
		  		<div class="small text-danger" v-if="boothFind.status===1">锁定</div>
		  		<div class="small text-success" v-if="boothFind.status===2">已售</div>
			</div>
		</div>
		<div class="flex px-3 py-2 small" v-if="boothFind.status===2">
			<div class="pr-2">
				<img :src="boothFind.logo" alt="" width="60" height="60"
				class="rounded border p-1">
			</div>
			<div class="flex-1">
				<div>{{boothFind.title}}</div>
				<div>{{boothFind.stitle}}</div>
			</div>
			<div class="text-secondary">原绑定</div>
		</div>
		<div class="px-3 py-2">
			<el-autocomplete v-model="key"
			:placeholder="getSearchType()"
			class="w-100"
				:fetch-suggestions="querySearchCompany"
				value-key="title"
				:trigger-on-focus="false"
				:debounce="500"
				@select="handleSelect"
				clearable>
			    <el-select v-model="search_type" slot="prepend" placeholder="请选择">
			      <el-option label="公司ID" value="id"></el-option>
			      <el-option label="UID" value="uid"></el-option>
			      <el-option label="统一社会信用代码" value="uscc"></el-option>
			      <el-option label="公司名" value="company_name"></el-option>
			      <el-option label="联系人手机号" value="contacts_mobile"></el-option>
			      <el-option label="联系人邮箱" value="contacts_email"></el-option>
			    </el-select>
		    </el-autocomplete>
		</div>
		<div class="flex px-3 py-2 small" v-if="company.id">
			<div class="pr-2">
				<img :src="company.logo" alt="" width="60" height="60"
				class="rounded border p-1">
			</div>
			<div class="flex-1 font-weight-bold">
				<div>{{company.title}}</div>
				<div>{{company.stitle}}</div>
			</div>
			<div class="text-success">新绑定</div>
		</div>
		<ul class="flex1 infinite-list overflow-auto bg-light list" v-infinite-scroll="getBoothStatusLog"
		infinite-scroll-immediate="false">
		    <li v-for="(v,index) in log" class="flex bg-white mb-1">
		    	<div class="p-2">
		    		<div>{{v.nickname}}</div>
		    		<div class="flex">
		    			<div class="small text-secondary pr-1">原状态</div>
				  		<div class="small" v-if="v.status===0">待售</div>
				  		<div class="small text-danger" v-if="v.status===1">锁定</div>
				  		<div class="small text-success" v-if="v.status===2">已售</div>
		    		</div>
		    		<div class="flex">
		    			<div class="small text-secondary pr-1">新状态</div>
				  		<div class="small" v-if="v.old_status===0">待售</div>
				  		<div class="small text-danger" v-if="v.old_status===1">锁定</div>
				  		<div class="small text-success" v-if="v.old_status===2">已售</div>
		    		</div>
		    	</div>
		    	<div class="flex-1">
		    		<div class="text-right small p-1">{{v.create_time}}</div>
					<div class="flex pr-3 py-2 small border-bottom" v-if="v.old_company_id">
						<div class="pr-2">
							<img :src="v.old_logo" alt="" width="60" height="60"
							class="rounded border p-1">
						</div>
						<div class="flex-1">
							<div>{{v.old_title}}</div>
							<div>{{v.old_stitle}}</div>
						</div>
						<div class="text-secondary">原绑定</div>
					</div>
					<div class="flex pr-3 py-2 small" v-if="v.company_id">
						<div class="pr-2">
							<img :src="v.logo" alt="" width="60" height="60"
							class="rounded border p-1">
						</div>
						<div class="flex-1 font-weight-bold">
							<div>{{v.title}}</div>
							<div>{{v.stitle}}</div>
						</div>
						<div class="text-success">新绑定</div>
					</div>
		    	</div>
		    </li>
		    <li v-if="log.length<=0" class="bg-white py-5 text-center small text-secondary">
		    	无后台修改记录
		    </li>
		</ul>
	  	<div class="flex px-3 py-2">
	  		<div class="flex-1">
			    <el-button @click="$refs.drawerHandleBooth.closeDrawer()">关闭</el-button>
		    </div>
	  		<div class="flex-1 text-center">
			    <el-button type="info" :loading="form.ajax" @click="setBoothStatus(0)">待售</el-button>
		    </div>
	  		<div class="flex-1 text-center" v-if="boothFind.status!==2">
		    	<el-button type="danger" :loading="form.ajax" @click="setBoothStatus(0)" v-if="boothFind.status===1">解锁</el-button>
		    	<el-button type="danger" :loading="form.ajax" @click="setBoothStatus(1)" v-else>锁定</el-button>
		    </div>
	  		<div class="flex-1 text-center">
		    	<el-button type="success" :loading="form.ajax" @click="setBoothStatus(2)">已售</el-button>
		    </div>
	  	</div>
  	</div>
</el-drawer>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="JobFair"}
	var JobFair=[];
	{else/}
	var JobFair={:json_encode($JobFair,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			JobFair:JobFair,
			boothCateIndex:null,
			boothIndex:null,
			drawerHandleBoothFind:false,
			key:'',
			search_type:'id',
			booth:'',
			company:{},
			form:{
				ajax:false,
				status:'',
				bid:'',
				company_id:''
			},
			search:{
				jid:{notempty name=":request()->get('jid')"}{:request()->get('jid')}{else/}''{/notempty},
				ajax:false
			},
			boothFind:{},
			log:[],
			logForm:{
				bid:'',
				ajax:false,
				page:1
			},
			Find:{},
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	getBoothStatusLog(){
	      		var _this=this;
	      		if(_this.logForm.ajax)return;
	      		_this.logForm.ajax=true;
				$.ajax({
					url:'/job-fair/getBoothStatusLog',
					type:'get',
					data:_this.logForm,
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								if(ret.data.current_page<ret.data.last_page){
	      							_this.logForm.ajax=false;
	      							_this.logForm.page++;
								}
								for (var i = 0; i < ret.data.data.length; i++) {
									_this.log.push(ret.data.data[i]);
								}
							}
						}
					}
				});
	    	},
	    	closeDrawerHandleBooth(done){
	    		this.key='';
	    		this.company={};
	    		this.boothFind={};
	    		this.form={
					bid:'',
					company_id:''
				};
	    		done();
	    	},
	    	setBoothStatus(status){
	    		this.form.status=status;
	    		switch(status){
	    			case 2:
	    			if(this.form.company_id){
	    				this.setBoothStatusCompany();
	    			}else{
	    				XYBase.msg('请检索要绑定的企业');
	    			}
	    			break;
	    			case 1:
	    				this.setBoothStatusLock();
	    			break;
	    			case 0:
	    			if(this.boothFind.status==2){
	    				this.setBoothStatusClearCompany();
	    			}else{
	    				this.setBoothStatusUnlock();
	    			}
	    			break;
	    		}
	    	},
	    	setBoothStatusClearCompany(){
	    		var _this=this;
	    		if(this.form.ajax)return;
	    		this.form.ajax=true;
    			$.ajax({
    				url:'',
    				data:this.form,
					type:'POST',
					dataType:'json',
					error:function(err){
	    				_this.form.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	    				_this.form.ajax=false;
						if (ret) {
							if (ret.code === 0) {
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].status=0;
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].logo='';
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].title='';
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].stitle='';
					    		_this.$refs.drawerHandleBooth.closeDrawer();
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
    			})
	    	},
	    	setBoothStatusUnlock(){
	    		var _this=this;
	    		if(this.form.ajax)return;
	    		this.form.ajax=true;
    			$.ajax({
    				url:'',
    				data:this.form,
					type:'POST',
					dataType:'json',
					error:function(err){
	    				_this.form.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	    				_this.form.ajax=false;
						if (ret) {
							if (ret.code === 0) {
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].status=0;
					    		_this.$refs.drawerHandleBooth.closeDrawer();
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
    			})
	    	},
	    	setBoothStatusLock(){
	    		var _this=this;
	    		if(this.form.ajax)return;
	    		this.form.ajax=true;
    			$.ajax({
    				url:'',
    				data:this.form,
					type:'POST',
					dataType:'json',
					error:function(err){
	    				_this.form.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	    				_this.form.ajax=false;
						if (ret) {
							if (ret.code === 0) {
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].status=1;
					    		_this.$refs.drawerHandleBooth.closeDrawer();
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
    			})
	    	},
	    	setBoothStatusCompany(){
	    		var _this=this;
	    		if(this.form.ajax)return;
	    		this.form.ajax=true;
    			$.ajax({
    				url:'',
    				data:this.form,
					type:'POST',
					dataType:'json',
					error:function(err){
	    				_this.form.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	    				_this.form.ajax=false;
						if (ret) {
							if (ret.code === 0) {
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].status=2;
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].logo=_this.company.logo;
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].title=_this.company.title;
					    		_this.Find.booth[_this.boothCateIndex].boothCate[_this.boothIndex].stitle=_this.company.stitle;
					    		_this.$refs.drawerHandleBooth.closeDrawer();
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
    			})
	    	},
	    	getSearchType(){
	    		var text='公司ID';
	    		switch(this.search_type){
	    			case 'id':
	    				text='公司ID';
	    				break;
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'uscc':
	    				text='统一社会信用代码';
	    				break;
	    			case 'company_name':
	    				text='公司名';
	    				break;
	    			case 'contacts_mobile':
	    				text='联系人手机号';
	    				break;
	    			case 'contacts_email':
	    				text='联系人邮箱';
	    				break;
	    		}
	    		return text;
	    	},
	    	querySearchCompany(key,callback){
	    		if(key){
	    			$.ajax({
	    				url:'/company',
	    				data:{
	    					search_type:this.search_type,
							key:key,
							pageSize:100,
							attestation:'all'
	    				},
						type:'get',
						dataType:'json',
						error:function(err){
							XYBase.error(XYBase.config.system_network_error);
						},
						success:function(ret){
							if (ret) {
								if (ret.code === 0) {
	    							callback(ret.data.data);
								}else{
									XYBase.msg(ret.msg);
								}
							}else{
								XYBase.error(XYBase.config.system_network_error);
							}
						}
	    			})
	    		}else callback([]);
	    	},
		    handleSelect(item) {
		        this.form.company_id=item.id;
		        this.company=item;
		    },
			getBoothClass(val){
				switch(val.status){
					case 1:
					return 'bg-danger text-white is-lock';
					case 2:
					return 'bg-success text-white is-lock';
					default:
					return 'bg-light';
				}
			},
			clickBooth(val,cateIndex,index){
				this.boothCateIndex=cateIndex;
				this.boothIndex=index;
				this.boothFind=val;
				this.form.bid=val.id;
				this.form.company_id='';
				this.uid='';
				this.company_id='';
				this.log=[];
				this.logForm.bid=val.id;
				this.logForm.ajax=false;
				this.logForm.page=1;
				this.drawerHandleBoothFind=true;
				this.getBoothStatusLog();
			},
	      	initHtml() {
	      		var _this=this;
	      		if(!this.search.jid||this.search.ajax)return;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.Find=ret.data;
								if(ret.data.booth&&ret.data.booth[0]&&ret.data.booth[0].identifier)
									_this.booth=ret.data.booth[0].identifier;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}